<template>
  <van-popup
    class="comment-popup"
    v-model="show" position="bottom" :style="{ height: height }"
    @close="close"
  >
    <div class="comment-wrapper">
      <div class="comment-box">
        <van-field
          v-model="message"
          :rows="rowNumber"
          type="textarea"
          :placeholder="placeholder"
        />
      </div>
      <div class="comment-group">
        <i class="iconfont" @click="commentFold" v-if="commentStatusUnfold">&#xe750;</i>
        <i class="iconfont" @click="commentUnfold" v-else>&#xe703;</i>
        <span class="comment-btn active" v-if="message.trim()" @click="sendComment">发布</span>
        <span class="comment-btn disabled" v-else>发布</span>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { addComments } from '@/api/articles'

export default {
  name: 'CommentBox',
  props: {
    showStatus: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请评论'
    },
    target: {
      type: [Number, String],
      default: 70156
    },
    art_id: {
      type: [Number, String]
    },
    commentsAllResults: {
      type: Array
    },
    replyCommentsAllResults: {
      type: Array
    },
    isReply: {
      tyep: Boolean,
      default: false
    }

  },
  data () {
    return {
      message: '', // 评论的内容
      rowNumber: 2, // 评论行数
      commentStatusUnfold: false,
      height: '20%',
      show: false
    }
  },
  watch: {
    commentStatusUnfold: {
      deep: false,
      handler (value, oldValue) {
        if (value) {
          this.height = '100%'
          this.rowNumber = 25
        } else {
          this.height = '20%'
          this.rowNumber = 2
        }
      },
      immediate: true
    },
    showStatus (value) {
      if (value) {
        this.show = true
      } else {
        this.show = false
      }
    }

  },
  methods: {
    // todo 2-5 展开评论
    commentUnfold () {
      this.commentStatusUnfold = !this.commentStatusUnfold
    },
    // todo 2-6 收缩评论
    commentFold () {
      this.commentStatusUnfold = !this.commentStatusUnfold
    },
    // todo 4-1 发布评论
    async sendComment () {
      console.log(1233)
      console.log('this.target')
      console.log(this.target)
      console.log('this.content')
      console.log(this.content)
      console.log('this.art_id')
      console.log(this.art_id)
      let res
      if (!this.isReply) {
        res = await addComments({
          target: this.target,
          content: this.message.trim()
        })
        console.log(res)
        console.log('ccc')
        console.log(typeof res.data.new_obj)
        if (typeof res.data.new_obj === 'object') {
          this.commentsAllResults.unshift(res.data.new_obj)
          console.log('数组')
          console.log(this.commentsAllResults)
        }
      } else {
        res = await addComments({
          target: this.target,
          content: this.message.trim(),
          art_id: this.art_id
        })
        console.log(res)
        console.log('ccc')
        console.log(typeof res.data.new_obj)
        if (typeof res.data.new_obj === 'object') {
          this.replyCommentsAllResults.unshift(res.data.new_obj)
          console.log('数组')
          console.log(this.replyCommentsAllResults)
        }
      }

      // todo 4-2 刷新页面
      this.$emit('refreshEvent')
      // todo 4-3 清空内容
      this.message = ''
      this.close()
    },
    // todo 2-8 弹窗
    close () {
      this.$emit('close')
      // 静默刷新
      this.$emit('bolEvent')
    }
  }
}
</script>

<style lang="less" scoped>
.comment-popup {
  transition: all .4s;
}

.comment-wrapper {
  display: flex;

  .comment-box {
    width: 70%;
    border: 1px solid #ddd;
    margin: 20px;
  }

  .comment-group {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;

    .iconfont {
      margin-top: 20px;
      font-size: 20px;
      font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
      font-weight: 700;
      color: #b8b8b8;
      line-height: 33px;
      letter-spacing: 1px;
    }

    span {
      font-size: 20px;
      font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
      font-weight: 700;
      color: #589cf2;
      line-height: 33px;
      letter-spacing: 1px;
      margin-bottom: 20px;
    }

    span.disabled {
      color: #b8b8b8;
    }

  }
}
</style>
